<template>
  <div
    class="inline-flex"
    h="30"
    w="30"
    m="2"
    v-for="(data, index) in order_data"
    :key="index"
    style="box-shadow: var(--el-box-shadow-lighter)"
  >
    <div class="main">
      <div class="aside">
        <img src="../assets/logo.png" alt="" />
        <div class="kind">
          <p>类型：</p>
          <button aria-disabled="false" type="button" class="index-el-button">
            <!--v-if--><span class="">{{ data.type }}</span>
          </button>
        </div>
        <p>预定价格：{{ data.price }}</p>
      </div>
      <div class="user_info">
        <p>委托人id：{{ data.customer_id }}</p>
        <p>委托具体内容：{{ data.description }}</p>
        <p>距离：{{ data.distance }}km</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["longitude", "latitude"],
  data() {
    return {
      kind: ["看护 ", "儿童 "],
      price: "320元",
      user_name: "张三",
      user_id: "111",
      belief_score: "98",
      order_info: "……",
      worker: ["李四", "王五"],
      time: "2023/10/8 14:39:45",
      order_data: [],
    };
  },
  watch: {
    latitude: function () {
      this.updateDistance();
    },
    longitude: function () {
      this.updateDistance();
    },
  },
  methods: {
    testRequst() {
      const params = new URLSearchParams();
      params.append("latitude", this.latitude);
      params.append("longitude", this.longitude);
      // // console.log('aaa');
      this.axios
        .post("http://127.0.0.1:8000/nearest_order/", params)
        .then((res) => {
          //Result(success,msg,data)
          // // console.log(id);
          if (res.data.success) {
            // console.log(res.data);
            this.order_data = res.data.data;
          }
        });
    },
    updateDistance() {
      // 调用后端API重新计算distance的值
      const params = new URLSearchParams();
      params.append("latitude", this.latitude);
      params.append("longitude", this.longitude);
      this.axios
        .post("http://127.0.0.1:8000/nearest_5/", params)
        .then((res) => {
          if (res.data.success) {
            this.order_data = res.data.data;
          }
        });
    },
  },
  mounted() {
    this.testRequst();
  },
};
</script>
<style scoped>
.inline-flex {
  width: 80%;
  height: 250;
  display: block;
  background-color: aliceblue;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 10%;
  margin-right: 10%;
}

.main {
  width: 90%;
  height: 180px;
  display: flex;
}

.aside {
  width: 30%;
  height: 90%;
  text-align: left;
}

.user_info {
  width: 70%;
  height: 100%;
  text-align: left;
}
.kind {
  display: flex;
  align-items: center;
}

img {
  width: 100%;
  height: 50%;
}
.want_to_work {
  display: flex;
}
</style>
